<template>
  <u-tabbar
    :value="user.tabIndex"
    :fixed="true"
    :placeholder="false"
    :safeAreaInsetBottom="true"
    :border="false"
    activeColor="#000000"
    inactiveColor="#999"
  >
    <u-tabbar-item text="首页" @click="changeTab(0)">
      <template #active-icon>
        <u-icon
          name="a-2-shouye"
          custom-prefix="custom-icon"
          size="24"
          color="#000000"
        ></u-icon>
      </template>
      <template #inactive-icon>
        <u-icon
          name="a-2-shouye"
          custom-prefix="custom-icon"
          size="24"
          color="#999999"
        ></u-icon>
      </template>
    </u-tabbar-item>
    <u-tabbar-item class="jiedan middle-tab" text="" @click="changeTab(1)">
      <template #active-icon>
        <div
          style="
            position: relative;
            top: -30rpx;
            border-radius: 100rpx;
            padding: 15rpx;
            background: #fff;
          "
        >
          <u-image
            width="80rpx"
            height="80rpx"
            src="/static/image/order.png"
          ></u-image>
        </div>
      </template>
      <template #inactive-icon>
        <div
          style="
            position: relative;
            top: -30rpx;
            border-radius: 100rpx;
            padding: 15rpx;
            background: #fff;
          "
        >
          <u-image
            width="80rpx"
            height="80rpx"
            src="/static/image/order.png"
          ></u-image>
        </div>
      </template>
    </u-tabbar-item>

    <u-tabbar-item text="工具" @click="changeTab(2)">
      <template #active-icon>
        <u-icon
          name="qiandao1"
          custom-prefix="custom-icon"
          size="24"
          color="#000000"
        ></u-icon>
      </template>
      <template #inactive-icon>
        <u-icon
          name="qiandao1"
          custom-prefix="custom-icon"
          size="24"
          color="#999999"
        ></u-icon>
      </template>
    </u-tabbar-item>

    <u-tabbar-item text="个人中心" @click="changeTab(3)" class="tool_tab">
      <template #active-icon>
        <u-icon
          name="wode"
          custom-prefix="custom-icon"
          size="24"
          color="#000000"
        ></u-icon>
      </template>
      <template #inactive-icon>
        <u-icon
          name="wode"
          custom-prefix="custom-icon"
          size="24"
          color="#999999"
        ></u-icon>
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script setup>
import { ref } from 'vue';

// import { useUserStore } from '@/stores/user';
// const user = useUserStore();

const tabobj = ['home', 'shop', 'user'];
function changeTab(index) {
  // user.changeTabIndex(index);
  uni.switchTab({
    url: `/pages/${tabobj[index]}/${tabobj[index]}`,
  });
}
</script>
<style scoped lang="scss">
.u-page__item__slot-icon {
  width: 40rpx;
  height: 40rpx;
  padding-bottom: 2rpx;
}

.jiedan {
  position: relative;
  top: -30rpx;
}
</style>
